<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 预验收申请 -->
    <div id="base-breadcrumb" style="position: relative; overflow: hidden">
      <!-- 搜索 -->
      <searchData :searchData="searchArr" @search="search"></searchData>
      <a-card :bordered="false">
        <!-- <title-name :title="$route.meta.title"></title-name> -->
        <a-button v-btnPermission="'qm_008_add_01'" icon="plus" class="mb12" type="primary" @click="handleManage(2)"
          >添加申请</a-button
        >
        <!-- 统计汇总 -->
        <AuditSummary :form="queryParam" :loadCount="loadCount" :api="api" />
        <!-- 表格 -->
        <list-table
          ref="table"
          size="default"
          :rowKey="(record) => record.id"
          :columns="columns"
          :request="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :isFixedRight="false"
          :isScrollX="false"
          showPagination="auto"
        >
          <span slot="action" slot-scope="text, record">
            <MoreButton>
              <a v-btnPermission="'qm_008_loo_04'" @click="handleManage(0, record)">查看</a>
              <template v-if="(record.statusCode === '0' || record.statusCode === '3')">
                <a-divider v-btnPermission="'qm_008_edi_02'" type="vertical"></a-divider>
                <a v-btnPermission="'qm_008_edi_02'" @click="handleManage(1, record)">编辑</a>
              </template>
              <template v-if="(record.statusCode === '0')">
                <a-divider v-btnPermission="'qm_008_del_03'" type="vertical"></a-divider>
                <a v-btnPermission="'qm_008_del_03'" @click="handleRemove(record)">删除</a>
              </template>
              <!-- 当状态为审批中 -->
              <template v-if="record.statusCode != '0'">
                <a-divider v-btnPermission="'qm_008_exa_05'" type="vertical"></a-divider>
                <a v-btnPermission="'qm_008_exa_05'" @click="$bus.$emit('showApprovalDetailsDialog', record.id)"
                  >审批详情</a
                >
              </template>
            </MoreButton>
          </span>
          <!-- 状态 -->
          <template slot="statusCode" slot-scope="text, record">
            <status-display :statusCode="record.statusCode" isApproval></status-display>
          </template>
          <a-list
            slot="expandedRowRender"
            slot-scope="record"
            item-layout="horizontal"
            :data-source="formatItem(record)"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <!-- <a-row :gutter="12" style="width: 900px">
                <a-col :span="3">
                  <ellipsis tooltip :length="10">{{ item.name }}</ellipsis>
                </a-col>
                <a-col :span="4"
                  ><ellipsis tooltip :length="16">{{ item.jobTitle }}</ellipsis></a-col
                >
                <a-col :span="8"
                  >小组分工：<ellipsis tooltip :length="25">{{ item.laborWork }}</ellipsis></a-col
                >
                <a-col :span="9"
                  >负责验收部位/内容：<ellipsis tooltip :length="25">{{ item.acceptanceContent }}</ellipsis>
                </a-col>
                <div class="text_name" v-if="form.preAcceptanceTeam.length < 1">暂无</div>
              </a-row> -->
              <a-row type="flex" style="width: 100%">
                <a-col :span="3">{{ item.name }}</a-col>
                <a-col :span="21" v-if="item.key === 'preAcceptanceTeam'">
                  <a-row v-for="i in item.content" :key="i.id" :gutter="12" style="width: 900px">
                    <a-col :span="3">
                      <ellipsis tooltip :length="10">{{ i.name }}</ellipsis>
                    </a-col>
                    <a-col :span="4"
                      ><ellipsis tooltip :length="16">{{ i.jobTitle }}</ellipsis></a-col
                    >
                    <a-col :span="8"
                      >小组分工：<ellipsis tooltip :length="25">{{ i.laborWork }}</ellipsis></a-col
                    >
                    <a-col :span="9"
                      >负责验收部位/内容：<ellipsis tooltip :length="25">{{ i.acceptanceContent }}</ellipsis>
                    </a-col>
                    <div class="text_name" v-if="item.content.length < 1">暂无</div>
                  </a-row>
                </a-col>
                <div v-else>{{ item.content || '暂无' }}</div>
              </a-row>
            </a-list-item>
          </a-list>
        </list-table>
      </a-card>
    </div>
  </base-breadcrumb>
</template>

<script>
import { Ellipsis } from '@/components' // 表格
import { application } from '@/api/quality/unitProject' // api
import OrgTreeSelect from '@/components/OrgTreeSelect'
import StatusDisplay from '@/components/StatusDisplay'
import AuditSummary from '@/views/quality/components/AuditSummary' // 统计汇总
import SelectProjectStatus from '@/views/quality/components/SelectProjectStatus' // 项目状态
import Selector from '@/components/Select/Selector'

const searchArr = [
  // 搜索框
  {
    name: '所属单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  {
    name: '项目状态',
    type: SelectProjectStatus,
    valueKey: 'projectStatus'
  },
  {
    name: '预验收时间',
    type: 'dateRange',
    value: 'createTime',
    attr: {
      valueFormat: 'YYYY-MM-DD',
    },
  },
  {
    type: Selector,
    valueKey: 'checkAcceptanceTypeId',
    name: '验收类型',
    attrs: {
      labelInValue: false,
      selectType: '23',
      valueName: 'id',
      filterFn: (item) => item.code === '0' || item.code === '2' || item.code === '3'
      // code 1 分部分项验收
      // code 2 阶段验收
      // code 3 专项验收
      // code 4 竣工验收
      // code 0 单位工程验收
    }
  },
  {
    name: '验收内容',
    type: 'input',
    value: 'unitEngineering',
  },
]
const columns = [
  {
    title: '分公司',
    ellipsis: true,
    dataIndex: 'branchCompanyName',
  },
  {
    title: '项目',
    ellipsis: true,
    dataIndex: 'projectName',
  },
  {
    title: '验收类型',
    ellipsis: true,
    dataIndex: 'checkAcceptanceTypeName',
  },
  {
    title: '验收内容',
    ellipsis: true,
    dataIndex: 'unitEngineering',
  },
  {
    title: '数量',
    dataIndex: 'quantity',
  },
  {
    title: '部位',
    ellipsis: true,
    dataIndex: 'buildNumFloor',
  },
  {
    title: '预验收时间',
    dataIndex: 'acceptanceDate',
  },
  {
    title: '状态',
    dataIndex: 'statusCode',
    scopedSlots: { customRender: 'statusCode' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '180px',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+ Date.now(),
  components: {
    StatusDisplay,
    AuditSummary,
    Ellipsis,
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      queryParam: {},// 查询参数
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let createTime = this.queryParam.createTime
        if (createTime) {
          this.queryParam.beginDate = createTime[0]
          this.queryParam.endDate = createTime[1]
          delete this.queryParam.createTime
        }
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return application.postList(requestParameters).then((res) => {
          return res
        })
      },
      api: application, // api
      loadCount: 0, // 汇总加载控件
      editModel: 0,
      form: {},
    }
  },
  methods: {
    /**
     * 格式化检查项列表
     */
    formatItem(e) {
      let datas = []
      let title = {
        selfEval: '施工质量项目自评：',
        opinionOfChiefEngineerOfBranch: '分公司总工意见：',
        preAcceptanceTeam: '预验收小组成员及分工：',
      }
      for (let index in e) {
        let item = e[index]
        for (let i in title) {
          if (i == index) {
            let data = { name: title[i], content: item, key: i }
            datas.push(data)
          }
        }
      }
      return datas
    },
    /**
     * 搜索
     */
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
      this.loadCount++
    },
    /**
     * 删除草稿
     */
     handleRemove(e) {
      this.$confirm({
        title: '温馨提示',
        content: '确定删除草稿？',
        onOk: () => {
          return application.remove({ id: e.id }).then((res) => {
            this.$message.success('删除成功！')
            this.search()
          })
          // .catch((res) => {
          //   this.$message.warning('删除失败！')
          // })
        }
      })
    },
    /**
     * 操作栏
     */
    handleManage(type, record) {
      this.editModel = type
      let query = {
        editModel: type,
      }
      if (record?.id) {
        query.id = record.id
      }
      this.$router.push({
        name: '/quality/preAcceptanceManagement/preAcceptanceApplication/preAcceptanceApplicationEdit',
        query,
      })
    },
  },
}
</script>
<style lang="less" scoped>
::v-deep {
  .ant-table-tbody {
    overflow: overlay !important;
  }
}
</style>